<template>
  <div class="setting-panel-gui">
    <g-field-collapse
      label="全局样式"
    >
      <g-field
        :level="2"
        label="日期"
      >
        <el-input
          v-model="config.global.date"
          size="mini"
        />
      </g-field>
      <g-field
        :level="2"
        tooltip="请选择您系统有的字体，如果您系统无此字体，标题将会显示默认字体"
        label="字体"
      >
        <el-select
          v-model="config.global.fontFamily"
          size="mini"
        >
          <el-option
            v-for="item in fontFamilys"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      label="文本框"
    >
      <g-field-collapse
        label="大小"
      >
        <g-field
          :level="2"
          label="宽度"
        >
          <g-input-number
            v-model="config.input.size.width"
            :min="40"
            :max="1000"
            :step="5"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="高度"
        >
          <g-input-number
            v-model="config.input.size.height"
            :min="20"
            :max="100"
            :step="5"
            :is-inline="false"
          />
        </g-field>
      </g-field-collapse>
      <g-field-collapse
        label="边框"
      >
        <g-field
          :level="2"
          label="宽度"
        >
          <g-input-number
            v-model="config.input.border.width"
            :min="1"
            :max="10"
            :step="1"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="颜色"
        >
          <g-color-picker
            v-model="config.input.border.color"
          />
        </g-field>
        <g-field
          :level="2"
          label="圆角"
        >
          <g-input-number
            v-model="config.input.border.radius"
            :min="0"
            :max="100"
            :step="0.5"
            :is-inline="false"
          />
        </g-field>
      </g-field-collapse>
      <g-field
        :level="2"
        label="背景颜色"
      >
        <g-color-picker
          v-model="config.input.bgColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字字号"
      >
        <g-input-number
          v-model="config.input.fontSize"
          :min="12"
          :max="60"
          :step="1"
          :is-inline="false"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字颜色"
      >
        <g-color-picker
          v-model="config.input.fontColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="时间分隔符"
      >
        <el-input
          v-model="config.input.separator"
          size="mini"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字位置"
      >
        <el-select
          v-model="config.input.pos"
          size="mini"
        >
          <el-option
            v-for="item in hAligns"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      label="日历"
    >
      <g-field
        :level="2"
        label="文字字号"
      >
        <g-input-number
          v-model="config.calendar.fontSize"
          :min="12"
          :max="60"
          :step="1"
          :is-inline="false"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字颜色"
      >
        <g-color-picker
          v-model="config.calendar.fontColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="日历背景"
      >
        <g-color-picker
          v-model="config.calendar.bgColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="选择器背景"
      >
        <g-color-picker
          v-model="config.calendar.selectBGColor"
        />
      </g-field>
      <g-field-collapse
        label="外边框"
      >
        <g-field
          :level="2"
          label="宽度"
        >
          <g-input-number
            v-model="config.calendar.border.width"
            :min="0"
            :max="100"
            :step="1"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="颜色"
        >
          <g-color-picker
            v-model="config.calendar.border.color"
          />
        </g-field>
        <g-field
          :level="2"
          label="圆角"
        >
          <g-input-number
            v-model="config.calendar.border.radius"
            :min="0"
            :max="100"
            :step="1"
            :is-inline="false"
          />
        </g-field>
      </g-field-collapse>
      <g-field-collapse
        label="内边框"
      >
        <g-field
          :level="2"
          label="宽度"
        >
          <g-input-number
            v-model="config.calendar.paddingBorder.width"
            :min="0"
            :max="100"
            :step="1"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="颜色"
        >
          <g-color-picker
            v-model="config.calendar.paddingBorder.color"
          />
        </g-field>
        <g-field
          :level="2"
          label="内边距"
        >
          <g-input-number
            v-model="config.calendar.paddingBorder.padding"
            :min="0"
            :max="100"
            :step="0.5"
            :is-inline="false"
          />
        </g-field>
      </g-field-collapse>
      <g-field-collapse
        label="选择器内边距"
      >
        <g-field
          :level="2"
          label="时间"
        >
          <g-input-number
            v-model="config.calendar.select.time"
            :min="0"
            :max="100"
            :step="0.5"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="今"
        >
          <g-input-number
            v-model="config.calendar.select.today"
            :min="0"
            :max="100"
            :step="0.5"
            :is-inline="false"
          />
        </g-field>
      </g-field-collapse>
    </g-field-collapse>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, toRef } from 'vue'
import {
  fontFamilys,
  hAligns,
} from '@/data/select-options'
import { DatePicker } from './date-picker'

export default defineComponent({
  name: 'VDatePickerProp',
  props: {
    com: {
      type: Object as PropType<DatePicker>,
      required: true,
    },
  },
  setup(props) {
    const config = toRef(props.com, 'config')

    return {
      config,

      fontFamilys,
      hAligns,
    }
  },
})
</script>
